<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue框架</title>
</head>
<body>
<div id="vm_div">
    <h1>{{msg}}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //创建vue对象,此对象就是一个vm视图模型对象,负责将页面元素和变量进行绑定
    let vm = new Vue({
        el:"#vm_div",//el=element元素,每一个vue对象负责管理页面中某一部分元素
        data:{msg:"hello vue!"}
    })

    let count = 0;
    setInterval(function () {
        count++;
        //当vue对象中的msg变量值发生改变时,页面元素会自动跟着发生改变;
        //因为在vue对象中对页面元素和变量进行了绑定操作
        vm.msg=count;
        //下面的jq代码虽然也能实现相同功能,但是每次需要进行dom操作(遍历查找元素)
        //执行效率较低
        //$("h1").text(count);
    },1000);
</script>
</body>
</html>